<!doctype html>
<head>
    <title>Threebox example</title>
    <script src="../dist/threebox.js" type="text/javascript"></script>

    <script src='https://api.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body, html { 
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #map { 
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id='map' class='map'></div>

    <script>
    mapboxgl.accessToken = 'pk.eyJ1Ijoia3JvbmljayIsImEiOiJjaWxyZGZwcHQwOHRidWxrbnd0OTB0cDBzIn0.u2R3NY5PnevWH3cHRk6TWQ';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [-122.8170, 37.7894],
      zoom: 8.55,
      pitch: 60,
      heading: 41,
      hash: true
    });

    var highlighted = [];

    map.on("load", function() {
        // Initialize threebox
        window.threebox = new Threebox(map);
        threebox.setupDefaultLights();

        var geometry = new THREE.BoxGeometry(1000, 1000, 1000);
        var greenMaterial = new THREE.MeshPhongMaterial( {color: 0xaaffaa, side: THREE.DoubleSide});
        var redMaterial = new THREE.MeshPhongMaterial( {color: 0xffaaaa, side: THREE.DoubleSide});
        
        var cube = new THREE.Mesh(geometry, greenMaterial);
        threebox.addAtCoordinate(cube, [-122.4131, 37.9743, 10000]);
        cube.userData.name = "Green cube";

        for(var i = 0; i < 1000; i++) {
            _cube = new THREE.Mesh(geometry, redMaterial);
            _cube.userData.name = "Red cube #" + i;
            threebox.addAtCoordinate(_cube, [-123.4131 + Math.cos(i/5.0) * 0.5, 37.7743 + i * 0.05, 2500], {preScale: 1});
        }

        map.on('mousemove', function(e){
            var raycaster = new THREE.Raycaster();
            var mouse = new THREE.Vector2();

            // Clear old objects
            highlighted.forEach(function(h) {
                h.object.material = redMaterial;
            });
            highlighted.length = 0;

            // scale mouse pixel position to a percentage of the screen's width and height
            mouse.x = ( e.point.x / threebox.map.transform.width ) * 2 - 1;
            mouse.y = -( ( e.point.y) / threebox.map.transform.height ) * 2 + 1;
            console.log(mouse.x, mouse.y);
            // console.log(e.point.y);

            raycaster.setFromCamera(mouse, threebox.camera);

            // calculate objects intersecting the picking ray
            var intersects = raycaster.intersectObjects(threebox.world.children, true);
            console.log(intersects);
            intersects.forEach(function(i) {
                if(i.object.userData.name !== undefined) console.log("Mouse over '" + i.object.userData.name + "'");
                else console.log("Mouse over '" + i.object.userData.uuid     + "'");

                i.object.material = greenMaterial;
                highlighted.push(i);
            });
            
        });

    });




    function prettyPrintMatrix(uglymatrix){
        for (var s=0;s<4;s++){
            var quartet=[uglymatrix[s],
            uglymatrix[s+4],
            uglymatrix[s+8],
            uglymatrix[s+12]];
            console.log(quartet.map(function(num){return num.toFixed(4)}))
        }
    }

    </script>
</body>